<template lang="pug">
div
  g-h.tray-title(j-c="space-between" a-i="center")
    div.tray-title-code 托盘编号
    div.tray-title-num 数量
    img(
        src="img/add.svg"
        alt="add a tray"
        @click="addTrayItem"
        width="30"
        height="30"
        )
  ul
    li.tray-item(
        v-for="(item, i) in trayList"
        :key="i"
        )
      div.tray-item-code
        DropDownList.tray-item-code-content(
            :list="trayDropDownList"
            :curValue="item.title"
            @select="selectTray($event, i)"
            :style="{zIndex: (100-i).toString()}"
            )
      input.tray-item-num(
          v-model="item.num"
          @blur="$emit('check-input', item.num)"
          )
      img(
          src="img/delete.svg"
          alt="delete"
          @click="removeTrayItem(i)"
          width="20"
          height="20"
          )

</template>

<script>
import util from "$util"

export default {
  props: {
    // 托盘列表
    trayList: {
      type: Array,
      default: () => [
        { code: "", num: 0, title: "" },
      ],
    },
    // 托盘下拉列表
    trayDropDownList: {
      type: Array,
      default: () => [],
    },
  },
  methods: {
    // 选择托盘
    selectTray(option, i) {
      this.trayList[i].code = option.v
      this.trayList[i].title = option.vTitle
    },
    // 删除一行
    removeTrayItem(i) {
      this.trayList.splice(i, 1)
    },
    // 增加一行
    addTrayItem(i) {
      this.trayList.push({
        title: "",
        num: 0,
      })
    },
  },
}
</script>

<style lang="stylus" scoped>

.c-root
  height: 60vh
  padding: 1rem

.tray
  &-title
    margin: 0.5rem 0
    &-code
      width: 70%
      text-align: center
    &-num
      width: 16%
      text-align: center

  &-item
    display: flex
    justify-content: space-between
    margin-bottom: 0.5rem
    &-code
      position: relative
      width: 66%
      &-content
        width: 100%
        position: absolute
    &-num
      width: 18%
      text-align: end

</style>
